<template>
  <el-dialog
    v-model="dialogVisible"
    :title="paramsInfo.teamId === firstInfo.homeTeamId ? firstInfo.homeTeamName + '首发名单': firstInfo.awayTeamName + '首发名单'"
    width="70%"
  >
    <div>
      <el-descriptions class="descriptions-table" border>
        <el-descriptions-item label="轮次" width="85px">{{ firstInfo.raceRound }}</el-descriptions-item>
        <el-descriptions-item label="场序" width="85px">{{ firstInfo.raceOrder }}</el-descriptions-item>
        <el-descriptions-item 
          label-class-name="custom-label-name" 
          class-name="descriptions-name"
        >
          {{ firstInfo.homeTeamName }} VS {{ firstInfo.awayTeamName }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="descriptions-table" border>
        <el-descriptions-item label="城市" width="85px">-</el-descriptions-item>
        <el-descriptions-item label="体育场">{{ firstInfo.matchAddress }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ firstInfo.matchDate }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="descriptions-table" border :column="1">
        <el-descriptions-item
            :label="paramsInfo.teamId === firstInfo.homeTeamId ? '主队' : '客队'"
            label-class-name="col1-custom-label"
        >
          {{ paramsInfo.teamId === firstInfo.homeTeamId ? firstInfo.homeTeamName : firstInfo.awayTeamName }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="descriptions-table" border>
        <el-descriptions-item label="服装颜色" width="85px">
          运动员：
            上衣：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.playerShirt" />
            短裤：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.playerShorts" />
            球袜：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.playerSocks" />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          守门员：
            上衣：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.goalkeeperShirt" />
            短裤：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.goalkeeperShorts" />
            球袜：<el-input class="input-class" v-model="firstInfo.teamShirtConfig.goalkeeperSocks" />
        </el-descriptions-item>
      </el-descriptions>

      <div class="table-title">官员</div>
      <div style="display: flex;">
        <el-table :data="firstInfo.teamOfficialList.slice(0, teamOfficialIndex)" border>
          <el-table-column label="序号">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <team-official-table />
        </el-table>
        <el-table :data="firstInfo.teamOfficialList.slice(teamOfficialIndex)" border class="right-table">
          <el-table-column label="序号">
            <template #default="scope">{{ scope.$index + 1 + teamOfficialIndex }}</template>
          </el-table-column>
          <team-official-table />
        </el-table>
      </div>

      <div class="table-title" style="margin-top: 3px;">首发名单</div>
      <div style="display: flex;">
        <el-table :data="firstInfo.teamPlayerList.slice(0, teamPlayerIndex)" border>
          <el-table-column label="序号">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <team-player-table />
        </el-table>
        <el-table :data="firstInfo.teamPlayerList.slice(teamPlayerIndex)" border class="right-table">
          <el-table-column label="序号">
            <template #default="scope">{{ scope.$index + 1 + teamPlayerIndex }}</template>
          </el-table-column>
          <team-player-table />
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          提交名单
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getTeamStartingList, saveTeamStartingList } from '@/api/match'
import { computed, reactive, ref } from 'vue'
import { useRoute } from 'vue-router';
import teamOfficialTable from './components/teamOfficialTable.vue'
import teamPlayerTable from './components/teamPlayerTable.vue'
import { ElMessage } from "element-plus";

interface ITeamStartingInfoParams {
  raceScheduleId: number
  teamId: number
}

const enum PlayerStatusEnum {
  /************ 球队 ***************/
  STARTER = "starter", // 首发
  SUBSTITUTE = "substitute", // 替补
  SUSPEND = "suspend", // 停赛
  /************ 球队 ***************/

  /************ 球队官员 ***************/
  REGISTER = "register", // 报名
  NOT_REGISTER = "not_register" // 未报名
  /************ 球队官员 ***************/
}

const props = defineProps(['getTableData'])

const route = useRoute();
const dialogVisible = ref(false)
const firstInfo = ref<any>({
  teamShirtConfig: {},
  teamOfficialList: [],
  teamPlayerList: []
})
const paramsInfo = reactive<ITeamStartingInfoParams>({
  raceScheduleId: 1,
  teamId: 1
})
const submitLoading = ref(false)

const teamOfficialIndex = computed(() => {
  const remain = firstInfo.value.teamOfficialList.length % 2
  const index = Math.floor(firstInfo.value.teamOfficialList.length / 2)
  return remain > 0 ?  index + 1 : index
})
const teamPlayerIndex = computed(() => {
  const remain = firstInfo.value.teamPlayerList.length % 2
  const index = Math.floor(firstInfo.value.teamPlayerList.length / 2)
  return remain > 0 ?  index + 1 : index
})

const handleShow = (params: ITeamStartingInfoParams) => {
  dialogVisible.value = true
  paramsInfo.raceScheduleId = params.raceScheduleId
  paramsInfo.teamId = params.teamId
  getEditorInfo(params)
}

const getEditorInfo = (params: ITeamStartingInfoParams) => {
  getTeamStartingList(params).then(res => {
    const { data } = res
    data.teamOfficialList = data.teamOfficialList.map((item:any) => ({
      ...item,
      playerStatusBoolean: item.playerStatus === PlayerStatusEnum.REGISTER
    }))
    data.teamPlayerList = data.teamPlayerList.map((item:any) => ({
      ...item,
      first: item.playerStatus === PlayerStatusEnum.STARTER,
      substitute: item.playerStatus === PlayerStatusEnum.SUBSTITUTE
    }))
    firstInfo.value = {...data}
  })
}

const handleSubmit = () => {
  const getStatus = (first: boolean, substitute: boolean) => {
    if(first) {
      return PlayerStatusEnum.STARTER
    } else if(substitute) {
      return PlayerStatusEnum.SUBSTITUTE
    } else {
      return null
    }
  }
  const body = {
    raceScheduleId: paramsInfo.raceScheduleId,
    teamId: paramsInfo.teamId,
    teamShirtConfig: firstInfo.value.teamShirtConfig,
    teamOfficialList: firstInfo.value.teamOfficialList.map((item:any) => ({
      teamPlayerId: item.teamPlayerId,
      playerStatus: item.playerStatusBoolean ? PlayerStatusEnum.REGISTER : PlayerStatusEnum.NOT_REGISTER
    })),
    teamPlayerList: firstInfo.value.teamPlayerList.map((item:any) => ({
      teamPlayerId: item.teamPlayerId,
      playerStatus: getStatus(item.first, item.substitute),
      playerPosition: item.playerPosition
    }))
  }
  submitLoading.value = true
  saveTeamStartingList(body).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    submitLoading.value = false
    dialogVisible.value = false
    props.getTableData()
  }).catch(() => submitLoading.value = false)
}

defineExpose({
  handleShow
})
</script>
<style lang="scss" scoped>
.descriptions-table {
  // margin-bottom: 3px;
  ::v-deep {
    .el-descriptions__label {
      background: transparent !important;
      border-bottom: none !important;
    }
    .el-descriptions__content {
      border-bottom: none !important;
    }
    .custom-label-name {
      display: none;
    }
    .descriptions-name {
      font-weight: 700 !important;
      text-align: center;
    }
    .custom-label-city {
      width: 85px !important;
    }
    .col1-custom-label {
      width: 85px !important;
    }
  }
  .input-class {
    width: 100px;
    margin-right: 10px;
  }
}
  
.table-title {
  border: 1px solid #ebeef5;
  border-bottom: none;
  text-align: center;
  padding: 3px 0;
}
.right-table {
  margin-left: 3px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>